<template>
	<div class="content">
		<div class="input size">
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户邮箱" :label-width="formLabelWidth">
							<el-input v-model="deliveryTablForm.query.email" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="物品类型" :label-width="formLabelWidth">
							<el-select v-model="deliveryTablForm.query.type" placeholder="下拉选择">
								<el-option key="" label="全部" value=""></el-option>
								<el-option v-for="item in optionwp" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="物品名称" :label-width="formLabelWidth">
							<el-input v-model="deliveryTablForm.query.name" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2" class="inpt_in">
					<el-button style="width: 5vw;" type="primary" @click="liverySearch">搜索</el-button>
				</el-col>
			</el-row>
		</div>
		<div style="margin-top: 5vh;display: flex;align-items: flex-start;margin-left: 1vw;">
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= null ;liverySearch()">全选</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 1 ;liverySearch()">待备货</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 2 ;liverySearch()">已备货</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 3 ;liverySearch()">已发货</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 4 ;liverySearch()">发货成功</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 5 ;liverySearch()">发货失败</el-button>
			<el-button style="width: 5vw;" type="primary" @click="deliveryTablForm.query.state= 6 ;liverySearch()">等待取图</el-button>
			<el-button style="width: 5vw;" type="primary" @click="exporhandle()">导出</el-button>
		</div>
		<div class="boder">
			<el-row>
				<el-table :data="ylTablData" border style="width: 100%" :header-cell-style="{'text-align':'center','color':'rgba(0,0,0,0.85)'}"
				 stripe>
					<el-table-column fixed prop="id" label="发货ID" width="100" align="center">
					</el-table-column>
					<el-table-column prop="userId" label="用户ID" width="100" align="center">
					</el-table-column>
					<el-table-column prop="nickname" label="用户昵称" width="100" align="center">
					</el-table-column>
					<el-table-column prop="email" label="用户邮箱" width="100" align="center">
					</el-table-column>
					<el-table-column prop="name" label="物品名称" width="100" align="center">
					</el-table-column>
					<el-table-column prop="qualityName" label="品质" width="100" align="center">
					</el-table-column>
					<el-table-column prop="img" label="图片预览" width="100" align="center">
					</el-table-column>
					<el-table-column prop="price" label="售价" width="100" align="center">
					</el-table-column>
					<el-table-column prop="priceRusCost" label="采购价格" width="100" align="center">
					</el-table-column>
					<el-table-column label="交易链接" width="180" align="center">
						<template slot-scope="scope">
							<a v-bind:href="scope.row.steamTradeUrl" style="color: #33CABB;">发货记录</a>
							<a v-bind:href="scope.row.steamTradeUrlCurrent" style="color: #33CABB;">当前地址</a>
						</template>
					</el-table-column>
					<el-table-column prop="cooling" label="冷却时间" width="100" align="center">
					</el-table-column>
					<el-table-column prop="createdAt" label="创建时间" width="100" align="center">
					</el-table-column>
					<el-table-column prop="updatedAt" label="更新时间" width="100" align="center">
					</el-table-column>
					<el-table-column prop="remarkAdmin" label="备注" width="100" align="center">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="clickRemovesDialogForm(scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<el-pagination background layout="prev, pager, next,total" :page-count="getDataDs.pageCount" @current-change="handleCurrent">
			</el-pagination>
			<!-- 编辑弹窗 -->
			<el-dialog title="编辑" :visible.sync="RemovesDialogForm" v-if="RemovesDialogForm" top="5vh">
				<DeliveryDialog @DialogForm="clickDialogForm" :parentData.sync="ylTablData"></DeliveryDialog>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../../api/PurchaseDelivery/index.js'
	import DeliveryDialog from './DeliveryDialog/DeliveryDialog.vue'
	export default {
		components: {
			DeliveryDialog
		},
		data() {
			return {
				ylTablData: [],
				RemovesDialogForm: false,
				deliveryTablForm: {
					"currentPage": 1,
					"pageSize": 5,
					"query": {
						"trade_Type": 1,
						"product_Type": 1,
						"name": null,
						"email": null,
						"type": null,
						"state": null
					}
				},
				getDataDs: {
					"currentPage": 1,
					"pageSize": 5,
					"total": 100,
					"pageCount": 0,
					"query": {
						"product_type": 1,
						"name": "",
						"type": "",
						"state": ""
					}
				},
				formLabelWidth: '6vw',
				optionwp: [] //物流状态
			}
		},
		created() {
			this.$axios.get(`${api}/gamemall/droplist/type`, {})
				.then(res => {
					this.optionwp = res.obj
				})
				.catch(err => {
					// this.$message({
					// 	message: '请求异常',
					// 	type: 'warning'
					// })
				});
			this.liverySearch()
		},
		methods: {
			//分页加载
			deliverySearch() {
				console.log(this.deliveryTablForm.query.state)
				this.$axios.post(`${api}/gamemall/trade/searchListByPage`,this.getDataDs).then(res => {
						this.ylTablData = res.data.list
						this.getDataDs.total = res.data.total;
						this.getDataDs.pageCount = res.data.pages;
						console.log(res.data.list)
						// if (res.status == 500) {
						// 	this.$message({
						// 		message: '没有找到数据',
						// 		type: 'warning'
						// 	})
						// }
					})
					.catch(err => {
						// this.$message({
						// 	message: '没有数据',
						// 	type: 'warning'
						// })
					})
			},
			//搜索
			liverySearch() {
				this.getDataDs.pageCount = 0
				console.log(this.deliveryTablForm.query.state)
				this.$axios.post(`${api}/gamemall/trade/searchListByPage`,this.deliveryTablForm).then(res => {
						if (res.code == 200) {
							this.ylTablData = res.data.list
							this.getDataDs.total = res.data.total;
							this.getDataDs.pageCount = res.data.pages;
						}
						if(res.code == 500) {
							this.ylTablData = []
							this.getDataDs.total = 0
							this.getDataDs.pageCount = 0
						}
					})
					.catch(err => {
						// this.$message({
						// 	message: '没有数据',
						// 	type: 'warning'
						// })
					})
			},
			clickRemovesDialogForm(data) {
				this.ylTablData = data
				this.RemovesDialogForm = true
			},
			clickDialogForm() {
				this.deliverySearch()
				this.RemovesDialogForm = false
			},
			handleCurrent(pageNumber) {
				this.getDataDs.currentPage = pageNumber;
				console.log(this.getDataDs.currentPage)
				this.deliverySearch()
			},
			//导出
			// exporhandle () {
			// 	this.$axios.get(`${api}/gamemall/trade/export`,this.deliveryTablForm).then(res => {
			// 			 window.location.href = res.data.url
						
			// 		})
			// 		.catch(err => {
						
			// 		})
			// }

		}
	}
</script>

<style scoped>
	.content {
		width: 99%;
		height: 99%;
		margin-left: 0.5%;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		border-radius: 0.325rem;
	}

	.inpt_in {
		margin-top: 1%;
	}

	.boder {
		width: 98%;
		height: 75%;
		border: 1px solid #EBEEF5;
		margin-top: 2%;
		margin-left: 1%;
	}

	.size {
		font-size: 0.8rem;
		color: #606266;
	}
</style>
